<template>
    <div class="box-group-wrap" style="padding-bottom: 0;">
        <p class="title">客户标签</p>
        <!-- <div class="line"></div> -->
        <div v-if="!globalVariableIsCoilIn" class="nodatalist" style="padding-bottom: 10px;">
            <img src="@/assets/img/khindex/nuMessage.png" alt width="40px" />
            <p>暂无客户标签</p>
        </div>
        <div v-else style="text-align: left;margin-top: 10px;">
            <div class="contentMain">
                <el-row>
                    <el-col :span="20" v-if="!accountTitleData.position == ''">
                        <p>
                            <span>职位：</span>
                            <span class="text">{{accountTitleData.position}}</span>
                        </p>
                    </el-col>
                    <el-col :span="20" v-if="!accountTitleData.dept == ''">
                        <p>
                            <span>部门：</span>
                            <span class="text">{{accountTitleData.dept}}</span>
                        </p>
                    </el-col>
                    <el-col :span="20">
                        <p class="btmstyle">
                            <span
                                v-if="!accountTitleData.remark == ''"
                                class="content"
                            >{{accountTitleData.remark}}</span>
                            <span
                                v-if="!accountTitleData.remarkTwo == ''"
                                class="content"
                            >{{accountTitleData.remarkTwo}}</span>
                        </p>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { isEmptyObject } from '@/utils/Object';

export default {
    name: 'accountTitle',
    data() {
        return {
            labelValueList: [],
            accountTitleData: {},
            colorList: ['#e9e7ef', '#fffbf0', '#f0f0f4', '#fcefe8', '#e9f1f6', '#e0eee8', '#c0ebd7', '#70f3ff', '#ffb3a7', '#edd1d8', '#a4e2c6', '#eedeb0', '#bbcdc5', '#a1afc9', '#e9e7ef', '#fffbf0', '#f0f0f4', '#fcefe8', '#e9f1f6', '#e0eee8', '#c0ebd7'],
            // iscustomerInfo_3002_CUSTID:this.$store.getters.customerInfo_3002||'',

        };
    },
    mounted() {
        // this.getCustLabel();
    },
    // 取缓存信息
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'customerInfo_3002',
            'globalVariable'
        ]),
        globalVariableIsCoilIn() {
            if (this.globalVariable.isCoilIn) {
                // console.log('执行了——+++++++——多次？？');
                const dataValue = this.getInitData();
                return dataValue
            } else {
                // console.log('执行了————少次？？');
                return false;
            }
        },
    },
    methods: {
        // 获取用户标签数据
        // 这块逻辑有点复杂
        // 1 当前手机号可以查的到数据 ----数据直接展示
        // 2 当前手机号 查不到数据 且 当前手机号是预留手机号 ------- 获取证件号 然后通过证件号查数据 
        // 3 当前手机号 查不到数据 且 当前手机号又不是预留手机号 不显示

        // 获取客户标签数据
        async getInitData() {
            let params = {
                // custName: this.customerInfo_3002.CHINAME,
                phoneNumber: this.customerInfo_3002.MOBILEPHONE,
                idNo: this.customerInfo_3002.CUSTID,
            };
            console.log(params, '111111111111');
            await this.$post.customerRemarke.findByMessage(params).then((res) => {
                console.log('客户标签数据 请求到了  ', res.data);
                if (res.data.success) {
                    this.accountTitleData = res.data.content || [];
                    return true;
                } else {
                    return false;
                }
            });
        },
        // 开始制作标签
        getCustLabel() {
            this.$post.Custlabel.getCustLabel({ custId: this.cardInfo_3004.CUSTID })
                .then((res) => {
                    if (res.data.success) {
                        const arr = [];
                        const custObj = res.data.content;
                        if (custObj) {
                            Object.keys(custObj).forEach((key) => {
                                // 等于0和等于否的过滤掉，证件号、银行号去掉
                                if (custObj[key] !== '0' && custObj[key] !== '否' && key !== 'custId' && key !== 'bankNum') {
                                    arr.push({ name: key, value: custObj[key] });
                                }
                            });
                        }
                        const newArr = [];
                        this.custList.forEach((item) => {
                            arr.forEach((i) => {
                                if (item.value === i.name) {
                                    newArr.push({ name: item.name, value: i.value });
                                }
                            });
                        });
                        this.labelValueList = newArr;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.box-group-wrap {
    .tagItem {
        display: inline-block;
        border-radius: 5px;
        color: #333;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        box-sizing: border-box;

        .el-button {
            height: 100%;
            width: 100%;
            padding: 0;
            background-color: rgba(255, 255, 255, 0);
            border: none;
            font-size: 12px;
        }
    }
    .contentMain {
        padding: 5px 10px;
        p {
            font-size: 12px;
            line-height: 24px;
        }
        p.btmstyle {
            span {
                display: inline-block;
                margin: 0 6px 6px 0;
                background-color: #7196eb;
                color: #fff;
            }
        }
        span.content {
            border-radius: 5px;
        }
    }
}
</style>
